import React from 'react';
import { Button, Row, Col, Tooltip, Icon, Card } from 'antd';
import CommonListsIndex from '../../../components/CommonLists/index';
import DeptAdd from './add';
import DeptList from './list';
import TreeSelect from './TreeSelect';
import services from 'src/services/api';
import Modal from '../../../components/Modal/index';

import './index.less';

class Dept extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.state = {
      ...this.state,
      deptTree: [],
      expandedKeys: ['0'], // 左导航展开
      selectedKeys: [], // 左导航选中的节点key
      node: {}, // 左导航选中的节点对象
    };
    this.api = 'dept';
    this.addComponent = DeptAdd;
    this.editComponent = DeptAdd;
    this.listsComponent = DeptList;
    this.queryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.treeParams = {
      dept_id: '',
      dept_code: '',
    };
    this.model_width = 500;
  }
  componentDidMount() {
    this.getDeptTree();
    this.queryList();
  }

  // 左侧部门列表
  getDeptTree = () => {
    services.dept.tree().then((res) => {
      if (res.code === 0) {
        this.setState({ deptTree: res.data });
      }
    });
  };

  // 筛选列表，含参数
  freshQueryList = () => {
    this.queryList({ ...this.queryPanigation, ...this.treeParams });
  };

  // 左导航点击
  TreeSelectHandle = (node, key) => {
    this.setState({
      selectedKeys: key,
      node,
    });
    this.treeParams = {
      dept_id: node.dept_id,
      dept_code: node.dept_code,
    };
    this.refreshFilter();
  };

  actionText = (record) => {
    return (
      <div>
        <span>{record.dept_name}</span>
        <span>
          <Icon type='edit' style={{ marginLeft: 5, color: '#bbbbbb' }} onClick={this.update.bind(this, record)} />
          <Icon
            type='minus-circle'
            style={{ marginLeft: 5, color: '#bbbbbb' }}
            onClick={this.delete.bind(this, record.dept_id)}
          />
          <Icon
            type='plus-circle'
            style={{ marginLeft: 5, color: '#bbbbbb' }}
            onClick={this.ModalOpen.bind(this, 'add', { parent_code: record.dept_code || -1 })}
          />
        </span>
      </div>
    );
  };

  // 部门编辑
  update = (record) => {
    // services[this.api].detail({ dept_id: record.dept_id }).then(res => {
    //   if (res.code === 0) {
    //     this.ModalOpen('update', res.data)
    //   }
    // })
  };

  // 部门新增
  ModalOpen = (actionType, record = null) => {
    // Modal.open({
    //   title: actionType === 'add' ? '新建部门' : '编辑部门',
    //   width: '500px',
    //   content: (
    //     <DeptAdd
    //       closeModal={this.closeModal}
    //       actionType={actionType}
    //       record={record}
    //       deptTree={this.state.deptTree}
    //     />
    //   ),
    //   isOkBtn: false,
    //   maskClosable: false,
    //   isCancelBtn: false,
    // });
  };

  // 部门删除
  delete(dept_id) {
    // Modal.open({
    //   title: '',
    //   width: '360px',
    //   isConfirm: true,
    //   content: <p>该部门下的子部门会一并删除，确认删除吗？</p>,
    //   isOkBtn: true,
    //   isCancelBtn: true,
    //   ok: () => {
    //     services[this.api].delete({ dept_id }).then((data) => {
    //       if (data.code === 0) {
    //         message.success(data.msg);
    //         this.closeModal()
    //       } else {
    //         message.error(data.msg);
    //       }
    //     });
    //   },
    //   cancel: () => {
    //     Modal.close();
    //   },
    // });
  }

  closeModal = (onlyClose) => {
    if (onlyClose) {
      Modal.close();
    } else {
      Modal.close();
      this.getDeptTree();
      this.freshQueryList();
    }
  };

  getColumns = () => {
    return [
      {
        title: '部门名称',
        key: 'dept_name',
        dataIndex: 'dept_name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '部门编号',
        key: 'dept_code',
        dataIndex: 'dept_code',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '上级部门名称',
        key: 'parent_name',
        dataIndex: 'parent_name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '上级部门编号',
        key: 'parent_code',
        dataIndex: 'parent_code',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '部门层次',
        key: 'dept_layer',
        render: (text, record) => {
          return (
            <Tooltip title={record.dept_layer.join('/')} placement='topLeft'>
              {record.dept_layer.join('/')}
            </Tooltip>
          );
        },
      },
      {
        title: '负责人姓名',
        key: 'manager',
        dataIndex: 'manager',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '联系方式',
        key: 'email',
        dataIndex: 'email',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '部门描述',
        key: 'remark',
        dataIndex: 'remark',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      // {
      //   title: '创建人/修改人',
      //   key: 'user',
      //   render: (text, record) => {
      //     let t = record.create_user_name + '/' + (record.update_user_name || record.create_user_name)
      //     return (
      //       <Tooltip title={t} placement='topLeft'>
      //         {t}
      //       </Tooltip>
      //     )
      //   }
      // },
      {
        title: '更新时间',
        key: 'update_time',
        dataIndex: 'update_time',
        render: (text, record) => {
          let t = record.update_time || record.create_time;
          return (
            <Tooltip title={t} placement='topLeft'>
              {t}
            </Tooltip>
          );
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle' style={{ marginBottom: 10 }}>
          <Col span={4}>
            <Button type='primary' onClick={this.ModalOpen.bind(this, 'add')} disabled>
              新建部门
            </Button>
          </Col>
        </Row>
        <Row gutter={16} type='flex' className='dept-container'>
          <Col span={6} style={{ width: 300 }}>
            <Card bordered={false}>
              <TreeSelect
                data={this.state.deptTree}
                expandedKeys={this.state.expandedKeys}
                selectedKeys={this.state.selectedKeys}
                nodeTitle='dept_name'
                nodeChild='child'
                onSelect={this.TreeSelectHandle}
                actionText={this.actionText}
              />
            </Card>
          </Col>
          <Col span={18}>
            <Card bordered={false}>
              <ListsComponent
                {...this.state}
                edit={this.edit}
                queryList={this.freshQueryList}
                {...this.props}
                onChangePagination={this.onChangePagination}
                rowKey='dept_id'
                columns={this.getColumns()}
              />
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Dept;
